<template>
  <view>
    <!-- <up-navbar title="我的" bgColor="transparent" leftIcon=""> </up-navbar> -->
    <!-- #ifdef MP-WEIXIN -->
    <customNav
      class="z-[111] relative"
      style="position: relative; z-index: 888"
      :back="false"
      title="我的"
    ></customNav>
    <!-- #endif -->
    <view
      class="my-bg w-full"
      :style="{
        paddingTop: navHeight * 2 + 24 + 'rpx',
      }"
    >
      <view class="flex justify-between items-center pl-[36rpx] pr-5">
        <view class="flex justify-center items-center mt-[30rpx]">
          <image
            @click="goInfo"
            v-if="isLogin"
            :src="userInfo.avatar"
            class="w-[109rpx] h-[109rpx] rounded-full"
            mode="aspectFill"
          ></image>
          <image
            v-else
            @click="handleLogin"
            src="@/static/avatar.png"
            class="w-[109rpx] h-[109rpx] rounded-full"
          ></image>
          <view class="pl-3" @click="goInfo" v-if="isLogin">
            <view class="text-main text-lg font-medium">{{
              userInfo.nickname
            }}</view>
            <view class="text-[#979797] text-xs mt-[14rpx]">{{
              userInfo.mobile
            }}</view>
          </view>
          <view class="pl-3" @click="handleLogin" v-else>
            <view class="text-main text-lg">请登录</view>
          </view>
        </view>
        <view v-if="isLogin" @click="logOut" class="text-[#B8B8B8] text-xs"
          >退出登录</view
        >
      </view>
    </view>
    <view class="flex justify-between items-center mt-5 px-5">
      <view
        @click="goTab('/pages/my/cooperate')"
        class="relative text-[#1A1C1E] text-xl bg-white w-full mr-2 overflow-hidden rounded-[20rpx] flex items-center justify-between"
      >
        <view class="absolute top-1/2 -translate-y-1/2 left-[20rpx] z-10"
          >合作咨询</view
        >
        <image
          src="@/static/zixun.png"
          class="w-full h-[26rpx]"
          mode="widthFix"
        ></image>
      </view>
      <view
        @click="goTab('/pages/my/faceBack')"
        class="relative text-[#1A1C1E] text-xl bg-white w-full ml-2 overflow-hidden rounded-[20rpx] flex items-center justify-between"
      >
        <view class="absolute top-1/2 -translate-y-1/2 left-[20rpx] z-10"
          >意见反馈</view
        >
        <image
          src="@/static/fankui.png"
          class="w-full h-[26rpx]"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="px-6 mt-5">
      <view class="text-xl font-medium text-black mb-[30rpx]"
        >最近询价状态</view
      >
      <template v-if="isLogin && statusList.length">
        <view
          class="rounded-lg overflow-hidden"
          v-for="(item, index) in statusList"
          :key="index"
        >
          <view class="xunjia px-[30rpx] pt-4 pb-3 mb-3 overflow-hidden">
            <view
              class="flex justify-between items-center air pb-[30rpx] overflow-hidden"
            >
              <view class="flex items-center">
                <image src="@/static/flyAir.png" class="w-5 h-5"></image>
                <view class="pl-[14rpx] text-[#1A1C1E] text-base font-medium">{{
                  item.plane_name
                }}</view>
                <view
                  class="w-[12rpx] h-[12rpx] bg-[#DCE4E8] rounded-full mx-[14rpx]"
                ></view>
                <view class="text-[#6C7278] text-base">{{
                  item.flight_date
                }}</view>
              </view>
              <view class="text-theme font-medium text-base">{{
                item.handle_status_name
              }}</view>
            </view>
            <view
              class="flex justify-between text-[#1A1C1E] text-4xl mt-[30rpx] font-medium"
            >
              <view class="">{{ item.start_area }}</view>
              <image
                class="h-[60rpx] mx-[44rpx] flex-1"
                src="@/static/airWay.png"
              ></image>
              <view>{{ item.end_area }}</view>
            </view>
          </view>
        </view>
      </template>
      <view class="flex-1 flex justify-center items-center py-7" v-else>
        <up-empty
          textSize="16"
          textColor="#222222"
          text="暂无数据"
          icon="/static/empty.png"
          width="101"
          height="120"
        >
        </up-empty>
      </view>
    </view>
    <view class="mt-3 px-5 mb-12" v-if="helpList.length">
      <view class="bg-white rounded-xl pt-[30rpx] pb-3">
        <view class="flex items-center pl-[30rpx]">
          <image src="@/static/help.png" class="w-4 h-4"></image>
          <view class="text-black text-xl font-medium ml-2">帮助中心</view>
        </view>
        <view class="px-[30rpx]">
          <view class="">
            <up-tabs
              lineHeight="2"
              :list="list1"
              @click="(e) => (current = e.index)"
              lineColor="#4365DE"
              :inactiveStyle="{ color: '#1A1C1E', fontWeight: '700' }"
              :activeStyle="{ color: '#4365DE', fontWeight: '700' }"
              lineWidth="60"
            >
            </up-tabs>
            <view class="mt-[-4rpx]">
              <up-collapse accordion :border="false">
                <up-collapse-item
                  :title="item.title"
                  v-for="(item, index) in helpList[current].contents"
                  :key="index"
                >
                  <text class="u-collapse-content">{{ item.content }}</text>
                </up-collapse-item>
              </up-collapse>
            </view>
          </view>
        </view>
      </view>
    </view>
    <customTab value="my" />
  </view>
</template>

<script setup lang="ts">
import { throttle } from "lodash";
import { wexin_login_api, getMyCharters_api, helps_api } from "@/api/user.js";
import { ref, reactive, computed } from "vue";
import { onPageScroll, onShow } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();

const isLogin = computed(() => userStore.isLogin);
const userInfo = computed(() => userStore.userInfo);

onPageScroll((e) => {});
const systemInfo = uni.getSystemInfoSync();
// #ifdef MP
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;
// #endif

// 创建响应式数据
const list1 = ref([
  { name: "公务包机" },
  { name: "团体包机" },
  { name: "医疗包机" },
  { name: "航空货运" },
  { name: "公务包机" },
  { name: "团体包机" },
  { name: "医疗包机" },
  { name: "航空货运" },
]);

const current = ref(0);

const goTab = (url) => {
  if (!isLogin.value) return uni.$u.toast("请先登录");
  uni.navigateTo({
    url: url,
  });
};

const login = () => {
  uni.navigateTo({
    url: "/pages/my/login",
  });
};
const goInfo = () => {
  uni.navigateTo({
    url: "/pages/my/info",
  });
};

const statusList = ref([]);
const getStatus = () => {
  getMyCharters_api().then((res) => {
    statusList.value = res;
  });
};

const helpList = ref([]);
const gethelp = () => {
  helps_api().then((res) => {
    helpList.value = res;
    list1.value = res.map((e) => {
      return { name: e.name };
    });
  });
};
onShow(() => {
  if (isLogin.value) {
    getStatus();
  }
  gethelp();
});

const handleLogin = throttle(() => {
  uni.showLoading();
  uni.login({
    provider: "weixin",
    success: (res) => {
      wexin_login_api(res.code).then((resulit) => {
        if (resulit.code == 2) {
          login();
        } else {
          userStore.getUser(resulit.data.userinfo);
          userStore.login(resulit.data.userinfo.token);
          getStatus();
        }
      });
    },
    fail: (err) => {
      console.log(err);
    },
    complete: () => {
      uni.hideLoading();
    },
  });
}, 1000);
const logOut = () => {
  uni.showLoading();
  userStore.logout();
  setTimeout(() => {
    uni.hideLoading();
  }, 500);
};
</script>

<style lang="scss" scoped>
:deep(.u-tabs__wrapper__nav__item) {
  padding-left: 30rpx !important;
  padding-right: 30rpx !important;
}
:deep(.u-tabs__wrapper__nav) {
  margin: 0 -30rpx;
}
:deep(.u-cell__body) {
  padding: 30rpx 0 !important;
  border-top: 2rpx solid #f7f7f7 !important;
}
:deep(.u-collapse-item__content__text) {
  padding: 24rpx 6rpx !important;
  color: #8d8d8d !important;
  font-size: 28rpx !important;
}
.my-bg {
  width: 100%;
  background: linear-gradient(180deg, #e1ebf7 0%, rgba(225, 235, 247, 0) 100%);
  border-radius: 0rpx 0rpx 0;
}
.xunjia {
  height: 222rpx;
  background: linear-gradient(180deg, #ebefff 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 2rpx solid;
  border-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    )
    2 2;
  .air {
    border-bottom: 2rpx solid #ece5e5;
  }
}
</style>
